<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<!-- 装饰器模式： 是为了给一个函数赋能，增强它的某种能力，它能动态的添加对象的行为，也就是我传入的就是一个对象 -->

<body>
  <script>
    // const KuanWrite = function() {
    //   this.writeChiness = function() {
    //     console.log('我只会写中文');
    //   }
    //   this.start = function () {
    //     this.writeChiness()
    //   }
    // }
    // // 装饰器---增强kuanwrite的英文能力
    // const Decorator = function (old) {
    //   this.oldWrite = old.writeChiness
    //   // 增强的能力
    //   this.WriteEnlish = function () {
    //     console.log('我会写英文');
    //   }
    //   this.start = function () {
    //     this.oldWrite()
    //     this.WriteEnlish()
    //   }
    // }
    // const kuanWrite = new KuanWrite()
    // const decorator = new Decorator(kuanWrite)
    // // 原来的对象
    // kuanWrite.start()
    // // 装饰器增强后的对象
    // decorator.start()
    // 定义一个装饰器函数
    function simpleDecorator(target) {
      // 对目标类或方法进行一些简单操作，比如添加日志输出
      console.log(`Decorating ${target.name}`);

      // 返回原目标，保持其原有功能不变
      return target;
    }

    // 使用装饰器来装饰一个类
    @simpleDecorator
    class MyClass {
      constructor(name) {
        this.name = name;
      }

      sayHello() {
        console.log(`Hello from ${this.name}`);
      }
    }

    // 使用装饰器来装饰一个方法
    class AnotherClass {
      @simpleDecorator
      methodToDecorate() {
        console.log('Method decorated and called');
      }
    }
  </script>

</body>

</html>